<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-dropdown @command="setState">
          <span class="el-dropdown-link">
            {{stateStr}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <!-- 1.正常2.休眠3.过期4.潜在5.作废 -->
            <el-dropdown-item :command="{title:'全部状态',id:''}">全部状态</el-dropdown-item>
            <el-dropdown-item :command="{title:'正常',id:'1'}">正常</el-dropdown-item>
            <el-dropdown-item :command="{title:'休眠',id:'2'}">休眠</el-dropdown-item>
            <el-dropdown-item :command="{title:'过期',id:'3'}">过期</el-dropdown-item>
            <el-dropdown-item :command="{title:'潜在',id:'4'}">潜在</el-dropdown-item>
            <el-dropdown-item :command="{title:'作废',id:'5'}">作废</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item>
        <el-dropdown @command="setType">
          <span class="el-dropdown-link">
            {{typeStr}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{title:'全部单位类型',type:''}">全部单位类型</el-dropdown-item>
            <el-dropdown-item v-for="(item,index) in types"
              :key="index"
              :command="{title:item,type:item}">{{item}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item>
        <el-dropdown @command="setRank">
          <span class="el-dropdown-link">
            {{leveStr}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{title:'全部单位等级',rank:''}">全部单位等级</el-dropdown-item>
            <el-dropdown-item v-for="(item,index) in ranks"
              :key="index"
              :command="{title:item,rank:item}">{{item}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item>
        <el-dropdown @command="setAgreement">
          <span class="el-dropdown-link">
            {{agreeStr}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="{title:'全部签署协议',agreementId:''}">全部签署协议</el-dropdown-item>
            <el-dropdown-item v-for="(item,index) in heads"
              v-if="heads.length"
              :key="index"
              :command="{title:item.name,id:item.id}">{{item.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入客户名称/客户账号/联系人/行业/营业员"
          style="width:300px"
          v-model="search"
          clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small"
          type="primary"
          @click="_search">
          <i class="el-icon-search"
            style="width:20px"></i>
        </el-button>
      </el-form-item>
      <el-form-item class="fr">
        <el-button size="small"
          type="primary"
          @click="_add"
          v-has="'protocolunitset'">
          新增
        </el-button>
        <el-button size="small"
          type="primary"
          @click="_VoidAll"
          v-has="'protocolunitstate'">
          作废
        </el-button>
      </el-form-item>

    </el-form>
    <el-form>
      <el-form-item>
        <el-table max-height="600"
          ref="multipleTable"
          :data="unitList"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection"
            fixed="left"
            width="55">
          </el-table-column>
          <el-table-column prop="num"
            label="单位编码"
            width="120">
          </el-table-column>
          <el-table-column prop="name"
            label="单位名称"
            width="120">
          </el-table-column>
          <el-table-column label="状态"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.state ==1">正常</span>
              <span v-if="scope.row.state ==2">休眠</span>
              <span v-if="scope.row.state ==3">过期</span>
              <span v-if="scope.row.state ==4">潜在</span>
              <span v-if="scope.row.state ==5">作废</span>
            </template>
          </el-table-column>
          <el-table-column prop="type"
            label="单位类型"
            width="120">
          </el-table-column>
          <el-table-column prop="industry"
            label="单位行业"
            width="120">
          </el-table-column>
          <!-- <el-table-column prop="rank"
            label="单位等级"
            width="120">
          </el-table-column> -->
          <el-table-column prop="agreementUnit"
            label="签署协议"
            width="120">
          </el-table-column>
          <el-table-column prop="meeting"
            label="会议价"
            width="120">
          </el-table-column>
          <!-- <el-table-column prop="pay"
            label="付款方式"
            width="120">
          </el-table-column> -->
          <el-table-column prop="userName"
            label="营业员"
            width="120">
          </el-table-column>
          <!-- <el-table-column prop="room"
            label="总房数"
            width="120">
          </el-table-column>
          <el-table-column prop="money"
            label="总金额"
            width="120">
          </el-table-column> -->
          <el-table-column prop="create"
            label="创建日期"
            width="120">
          </el-table-column>
          <el-table-column prop="start"
            label="合同起始时间"
            width="120">
          </el-table-column>
          <el-table-column prop="end"
            label="合同终止时间"
            width="120">
          </el-table-column>
          <el-table-column prop="person"
            label="客户联系人"
            width="120">
          </el-table-column>
          <!-- <el-table-column prop="phone"
            label="电话"
            width="120">
          </el-table-column> -->
          <el-table-column prop="name"
            fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
              <el-button type="text"
                size="small"
                @click="_edit(scope.row.id)"
                v-has="'protocolunitset'">修改</el-button>
              <el-button type="text"
                size="small"
                style="color:#ddd"
                @click="_Void(scope.row)"
                v-if="scope.row.state !== 5"
                v-has="'protocolunitstate'">作废</el-button>
              <el-button type="text"
                v-if="scope.row.state === 5"
                size="small"
                @click="_Void(scope.row)">启用</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item class="fr">
        <el-pagination @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, prev , pager , next, sizes"
          :total="total"
          style="margin-top:20px">
        </el-pagination>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getPull,
  getPerson,
  getProtocolUnitList,
  setAgreementState
} from "@/public/js/agreement.js";
export default {
  components: {},
  props: {},
  data() {
    return {
      stateStr: "全部状态",
      typeStr: "全部单位类型",
      leveStr: "全部单位等级",
      agreeStr: "全部签署协议",
      salerStr: "全部营业员",
      unitList: [],
      ranks: [], //单位类型
      types: [], // 单位等级
      heads: [], // 签署协议
      marketPerson: [], //营业员
      search: "",
      type: "",
      rank: "",
      agreementId: "",
      userId: "",
      state: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      units: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    //新增
    _add() {
      this.$router.push({ path: `/index/updateAgreementUnit` });
    },
    _edit(id) {
      this.$router.push({ path: `/index/updateAgreementUnit?id=${id}` });
    },
    __init() {
      //获取下拉数据
      getPull().then(res => {
        this.ranks = res.data.ranks;
        this.types = res.data.types;
        this.heads = res.data.heads ? res.data.heads : [];
      });
      // 获取营业员列表
      getPerson().then(res => {
        this.marketPerson = res.data.marketPerson;
      });
    },
    // 获取协议单位列表
    _getProtocolUnitList() {
      getProtocolUnitList({
        search: this.search,
        type: this.type,
        rank: this.rank,
        agreementId: this.agreementId,
        userId: this.userId,
        state: this.state,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.unitList = res.data.unitList;
        console.log("this.unitList", this.unitList);
        this.total = res.data.total;
      });
    },
    // 关键字查询
    _search() {
      this.pageNum = 1;
      this.pageSize = 10;
      this._getProtocolUnitList();
    },
    // 修改状态
    _setAgreementState(state) {
      setAgreementState({ units: this.units, state: state }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.units = [];
          this.$refs.multipleTable.clearSelection();
          this._getProtocolUnitList();
        }
      });
    },
    // 批量选择
    handleSelectionChange(val) {
      this.units = [];
      val.forEach(item => {
        this.units.push(item.id);
      });
    },
    // 批量作废
    _VoidAll() {
      if (!this.units.length) {
        this.$message.error("请选择要操作的数据");
        return false;
      }
      this.$confirm(`您确定要批量解除协议?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this._setAgreementState(5);
        })
        .catch(() => {});
    },
    // 状态查询
    setState(state) {
      this.stateStr = state.title;
      this.state = state.id;
      this.pageNum = 1;
      this.pageSize = 10;
      this._getProtocolUnitList();
    },
    // 作废
    _Void(value) {
      let state = value.state == 5 ? 1 : 5;
      let handlerStr = state == 1 ? "启用" : "解除";
      let units = [];
      let str = value.name;
      units.push(value.id);
      this.units = units;
      this.$confirm(`您确定要${handlerStr}${str}的协议?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this._setAgreementState(state);
        })
        .catch(() => {});
    },
    // 单位类型查询
    setType(typeName) {
      this.pageNum = 1;
      this.pageSize = 10;
      this.typeStr = typeName.title;
      this.type = typeName.type;
      this._getProtocolUnitList();
    },
    // 单位等级查询
    setRank(rank) {
      this.pageNum = 1;
      this.pageSize = 10;
      this.rank = rank.rank;
      this.leveStr = rank.title;
      this._getProtocolUnitList();
    },
    // 营业员查询
    setSaler(person) {
      this.pageNum = 1;
      this.pageSize = 10;
      this.userId = person.id;
      this.salerStr = person.title;
      this._getProtocolUnitList();
    },

    // 签署协议查询
    setAgreement(agreement) {
      this.pageNum = 1;
      this.pageSize = 10;
      this.agreementId = agreement.id;
      this.agreeStr = agreement.title;
      this._getProtocolUnitList();
    },
    // 分页查询
    handleSizeChange(val) {
      this.pageSize = val;
      this._getProtocolUnitList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this._getProtocolUnitList();
    }
  },
  created() {
    this.__init();
    this._getProtocolUnitList();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
}
</style>